<template>
  <contentLayout use-fresh v-model:fresh-loading="freshLoading" @fresh-load="getDetail">
    <div class="project_detail_box" ref="projectRef">
      <div class="pro_header">
        <div class="pro_header_l">
          <div class="pro_header_l_title">{{ proData?.projectStatusLabel }} | {{ proData?.projectName }}</div>
          <div>
            <BaseTags :data-value="proData?.trialStageLabel" v-if="proData?.trialStageLabel"></BaseTags>
            <BaseTags data-value="保险" v-if="proData?.injuryInsurance" type="purple"></BaseTags>
            <BaseTags data-value="CDE备案" v-if="proData?.registrationNumber" type="green"></BaseTags>
          </div>
        </div>
        <div class="pro_header_r">
          <van-image :src="proData?.surfacePicture" lazy-load />
        </div>
      </div>

      <van-sticky>
        <van-tabs v-model:active="detActive" color="#2F54EB" title-inactive-color="rgba(51, 51, 51, 0.4)" @click-tab="onClickTab">
          <van-tab title="项目介绍" name="1"></van-tab>
          <van-tab title="入排标准" name="2"></van-tab>
          <van-tab title="研究者信息" name="3"></van-tab>
          <van-tab title="开展机构" name="4"></van-tab>
        </van-tabs>
      </van-sticky>

      <div class="pro_content">
        <div style="height: 300px; margin-bottom: 10px; background-color: #fff" :ref="setItemRef" data-id="1">项目介绍</div>
        <div style="height: 300px; margin-bottom: 10px; background-color: #fff" :ref="setItemRef" data-id="2">入排标准</div>
        <div style="height: 300px; margin-bottom: 10px; background-color: #fff" :ref="setItemRef" data-id="3">研究者信息</div>
        <div style="height: 300px; margin-bottom: 10px; background-color: #fff" :ref="setItemRef" data-id="4">开展机构</div>
      </div>
    </div>
  </contentLayout>
</template>
<script setup lang="ts" name="ProjectDetail">
import contentLayout from "@/layouts/contentLayout/index.vue";
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { useScroll } from "@vueuse/core";
import { getProjectDetail } from "@/apis/product";

const route = useRoute();

let isScrollAuto = true;

const proData = ref();
const contentRefs = ref<HTMLElement[]>([]);
const detActive = ref("1");

const projectRef = ref<HTMLElement | null>(null);
const scrollObj = useScroll(projectRef);

const freshLoading = ref(false);

function getDetail() {
  console.log(route);
  getProjectDetail(route.params.projectId)
    .then(res => {
      proData.value = res.data;
    })
    .finally(() => {
      freshLoading.value = false;
    });
}

const setItemRef = (el: HTMLElement) => {
  // el && contentRefs.value.push(el);
  const ids = contentRefs.value.map(item => item.dataset.id);
  if (el && el.dataset.id && !ids.includes(el.dataset.id)) {
    contentRefs.value.push(el);
  }
};

watch(
  () => scrollObj.y.value,
  newval => {
    if (!isScrollAuto) return;
    const elArr = contentRefs.value;
    const projectRefObj = projectRef.value as HTMLElement;
    const realH = projectRefObj.clientHeight + newval;
    let detActiveValue = elArr.length;
    if (realH <= projectRefObj.clientHeight && realH >= elArr[0].offsetTop) {
      detActiveValue = 1;
    } else if (realH < elArr[elArr.length - 1].offsetTop) {
      for (let i = 1; i < elArr.length - 1; i++) {
        if (realH >= elArr[i].offsetTop && realH < elArr[i + 1].offsetTop) {
          detActiveValue = i + 1;
          break;
        }
      }
    } else {
      detActiveValue = elArr.length;
    }
    detActive.value = detActiveValue.toString();
  }
);

const onClickTab = val => {
  // if (val.name === detActive.value) return;
  isScrollAuto = false;
  projectRef.value!.scrollTop = contentRefs.value[val.name - 1].offsetTop;

  setTimeout(() => {
    isScrollAuto = true;
  }, 500);
};

getDetail();
</script>

<style lang="scss" scoped>
.project_detail_box {
  height: var(--vhHeight);
  overflow-y: auto;

  .pro_header {
    display: flex;
    padding: 12px 16px;

    .pro_header_l {
      flex: 1;

      .pro_header_l_title {
        display: -webkit-box;
        height: 44px;
        margin-bottom: 8px;
        overflow: hidden;
        font-size: 14px;
        font-weight: bold;
        line-height: 22px;
        color: #515e94;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }

    .pro_header_r {
      width: 70px;
      padding-left: 10px;
      text-align: center;

      .van-image {
        width: 70px;
        height: 44px;
        margin-bottom: 3px;
        background-color: #f2f3f5;
        border-radius: 3px;
      }

      text {
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
        color: #333;
      }
    }
  }

  .pro_content {
    padding: 12px 16px 4px;
    background: linear-gradient(179deg, #f0f5ff 0%, #fff 100%);
  }
}
</style>
